<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>粗粮</title>
  <style>
   
   
   * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul li {
            list-style: none;
        }

        #shouye {
            width: 100%;
            min-width: 1200px;

        }

        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        #logo {
            /* background-color: red; */
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left: 10px;
        }

        #headleft {
            width: 50%;
            float: left;
            height: 80px;
            /* background-color: yellow; */
        }

        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }

        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }

        #login img {
            width: 20px;
            height: 80px;
        }

        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        /* 注销按钮 */
        #loginName,
        #unregister {
            display: none;
        }

        #unregister {
            height: 25px;
            width: 50px;
            border: none;
            outline: none;
            border-radius: 5px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;
        }

        #bodynav {
            width: 100%;
            height: 60px;
            background-color: rgb(160, 190, 117);
            /* background-color: red; */
        }

        #nav {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: rgb(160, 190, 117);
            /* background-color:pink; */
        }

        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }

        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }
        #foot ul li,
        #middle ul li {
            float: left;
        }

        #down:hover #updown{
            display: block;
           
        }
        #updown li:first-child{
            font-size: 20px;
            color: aqua;
         }
         #updown{
            display: none;
            width: 500px;
            height: 200px;
            background-color:#ccc;
            position: fixed;
            z-index: 10px;
        }

   
    h3{
        font-size: 20px;
        width:70%;
        text-align: center;
    }
    .quanbu ul li{
      margin-top: 20px;
      text-indent: 2em;
      font-size: 20px;
    }

   .quanbu{
      width:70%;
      height:620px;
      background-color: #fff;
      box-shadow:5px 5px 5px;
      border:1px solid black;
      margin: 0 auto;
      margin-top:50px;
    }
   .quanbu img{
       width: 200px;
        height: 80px;
        transform: rotate(-15deg);
        box-shadow:3px 3px 3px 1px black;
      
    }
  </style>
 <script>
    //登录后显示当前用户
    window.onload = function () {
        if (localStorage.getItem('loginName')) {
            var links = document.querySelectorAll('#headright a')
            for (var i = 0; i < links.length; i++) {
                links[i].style.display = 'none';
            }
            document.querySelector("#loginName").style.display = 'inline-block';
            document.querySelector("#unregister").style.display = 'inline-block';
            document.querySelector('#headright span').style.display = "none";
            document.querySelector('#loginName').innerHTML = "当前账号：" + localStorage.getItem('loginName')
        }
    }
    //注销事件
    function unregister() {
        localStorage.removeItem('loginName');
        location.replace('shouye.html')
    }
    //导航栏固定
    window.onscroll = function () {
        if (document.documentElement.scrollTop >= 80) {
            document.getElementById('bodynav').style.position = 'fixed';
            document.getElementById('bodynav').style.top = 0;
            document.getElementById('bodynav').style.left = 0;
        }
        else {
            document.getElementById('bodynav').style.position = 'static';
        }
    }
</script>
</head>

<body>
<div id="head">
    <div id="logo">
        <img src="images/logo1.jpg" alt="" width="200px" height="80px">
    </div>
    <div id="headleft">
        <div id="headleft1">
            <form action="#">
                <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
            </form>
        </div>
    </div>
    <div id="headright">
        <a href="login.html" id="login">注册</a>
        <span>|</span>
        <a href="register.html" id="login">登录</a>
        <span id="loginName"></span>
        <button id="unregister" onclick="unregister()">注销</button>
    </div>
</div>
    <div id="bodynav">
        <div id="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">套餐</a></li>
                <li id="down"><a href="#">健康饮食 </a>
                    <ul id="updown">
                        <li>人体群众</li>
                        <li>老人</li>
                        <li>孕妇</li>
                        <li>青少年</li>
                    </ul>
                </li>
                <li><a href="#">分享圈</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
  <div class="quanbu">
    <img src="images/4.png" alt="">
    <h3>老人食粗粮宜将其“细做”</h3>

    <ul>
      <li>  粗粮虽然口感粗糙，却很有营养。但对胃肠功能较弱的老年人来说，如何吃才能既不影响正常消化，又发挥粗粮的优势呢?</li> 
      <li> 合理食用粗粮的确有很多好处，不但可以预防便秘、动脉硬化、高血压、高血脂、糖尿病等，还具有一定的抗衰老作用。</li>
      <li> 合理食用粗粮的确有很多好处，不但可以预防便秘、动脉硬化、高血压、高血脂、糖尿病等，还具有一定的抗衰老作用。黄豆、赤豆、绿豆、玉米碴等粗粮，最适合熬成粥，并在其中放点红薯、青菜，做成甜粥或咸粥，非常适合早餐食用。</li>
      <li>
        <ul>
          <h4>一款贴心的小做法：粗粮细做-鲜奶玉米酪</h4>
          <li>准备玉米粉，糯米粉，玉米粒，葡萄干，鲜奶，鸡蛋两个，白砂糖30克，将食材全部倒入碗中，搅拌均匀倒入鲜牛奶，搅拌成糊状，倒入锅中，晃匀，煎至金黄即可，切块装盘。</li>
          <li>2.将果肉泥分次拌到米饭中，看颜色均匀艳丽即可，不要一次加入过多果泥造成米饭过稀。</li><br>
          <h4>小贴士</h4>
          <li>糯米粉和玉米粉的质量1：1</li>
        </ul>
      </li>
    </ul>
  </div>

</body>

</html>